<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传</title>
    <script type="text/javascript" src="/javascript/lib/jQuery-3.3.1.js"></script>
    <style type="text/css">
        /*@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }*/
       .form-group{
           border: 1px solid #666;
           width: 900px;
           height: 900px;
           margin: 20px auto;
       }
       #modal-inputFile{
           margin: 20px 40px;
       }
        #image-pre{
            margin: 10px 20px;
        }
        div{
            box-sizing: border-box;
            border-radius: 4px;
            padding: 4px;
            word-break: break-all;
            word-wrap: break-word;
        }
        #main-box{
            display: flex;
            display: -webkit-flex;
            border: 1px solid #666;
            margin: 10px;
            height: 200px;
        }
        .main-box-item{
            text-align: center;
            -webkit-flex: 1;
            flex: 1;
            display: flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            display: -webkit-flex;
            border: 1px solid #000;
            margin: 10px;
        }
        .file-read-content{
            border: 1px solid #000;
            overflow: auto;
            height: 120px;
            -webkit-flex: 1;
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="form-group">
        <div class="col-md-9">
            <input type="file" name="first" id="modal-inputFile">
            <button id="sureUpload">确认上传postData</button>
            <button id="sureUpload-form">确认上传formData</button>
            <button id="getFileInfo">获取上传文件信息</button>
            <button id="getFileInfo">获取文件类型</button>
            <hr>
            <input type="file" id="file-read-test">
            <button id="testFile">读取测试文件</button>
            <hr>
            <div id="main-box">
                <div class="main-box-item">
                    <div class="file-read-content"></div>
                    <div class="file-read-label">二进制文件</div>
                </div>
                <div class="main-box-item">
                    <div class="file-read-content"></div>
                    <div class="file-read-label">DataURL</div>
                </div>
                <div class="main-box-item">
                    <div class="file-read-content"></div>
                    <div class="file-read-label">文本</div>
                </div>
                <div class="main-box-item">
                    <div class="file-read-content"></div>
                    <div class="file-read-label">ArrayBuffer</div>
                </div>
            </div>
            <hr>
            <img src="/images/img2.jpg" class="img-responsive" id="image-pre" alt="预览区" style="max-height: 300px">
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            let imageObj = {
                name: '',
                data: ''
            }
            $("input[name=first]").change(function(e){
                let file = document.getElementById('modal-inputFile').files[0];
                if(/\.jpg$|\.png$/i.test(file.name)){
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(event){
                        let ib_pre = document.getElementById('image-pre')
                        ib_pre.src = this.result;
                        imageObj.name = file.name;
                        imageObj.data = this.result
                        console.log('文件格式为:',file.name)
                    }
                } else {
                    alert('只能选择 .png/.jpg 文件格式 ')
                }
            })
            // sureUpload-post
            $('#sureUpload').click(function(){
                $.post('/by/upload',imageObj,function(res){
                    console.log('图片上传结果',res)
                })
                console.log('文件',$('#modal-inputFile')[0].files)
            })

            // sureUpload-form
            $('#sureUpload-form').click(function(){

                let pathName = $('#modal-inputFile').val()
                console.log('pathName', pathName)
                console.log('file-content', document.getElementById('modal-inputFile').files[0])
                let formData = new FormData();
                formData.append("name",pathName);
                // formData.append('avatar', $("#modal-inputFile")[0].files[0]);
                formData.append('image', document.getElementById('modal-inputFile').files[0]);

                console.log('formData中的数据', formData)

                $.ajax({
                    type : 'post',
                    url : '/by/upload',
                    data : formData,
                    cache : false,
                    processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
                    // contentType : 'application/x-www-form-urlencoded', // 不设置Content-type请求头
                    contentType : false, // 不设置Content-type请求头
                    success : function(res){console.log('formData返回结果',res)},
                    error : function(res){console.log('formData返回结果',res)}
                })

            })

            $('#getFileInfo').click(function(){
                console.log('文件',$('#modal-inputFile')[0].files)
            })
            // testFile
            $('#testFile').click(function(){
                console.log('文件开始读取')
                let file = document.getElementById('file-read-test').files[0];
                let reader1 = new FileReader();
                let reader2 = new FileReader();
                let reader3 = new FileReader();
                let reader4 = new FileReader();
                reader1.readAsBinaryString(file);
                reader1.onload = function(event){
                    $('.file-read-content').eq(0).html(this.result)
                }

                reader2.readAsDataURL(file);
                reader2.onload = function(event){
                    $('.file-read-content').eq(1).html(this.result)
                }

                reader3.readAsText(file);
                reader3.onload = function(event){
                    $('.file-read-content').eq(2).html(this.result)
                }

                reader4.readAsArrayBuffer(file);
                reader4.onload = function(event){
                    $('.file-read-content').eq(3).html(this.result)
                }
            })
        })
    </script>
</body>
</html>